<template>
	<view class="timing-every">
		<view class="timing-title">
			定时关闭设置
		</view>
		<view class="timing-box" v-for="(item,index) in timinglist"   @click="toggleActive(index)">
			<view class="timing-text">{{item}}</view>
			<view class="timing-btn" :class="{ active: isActive == index}"></view>
		</view>
	</view>
</template>

<script>
	import '@/common/iconfont.css'
	export default {
		data() {
			return {
				timinglist:[
					"15分钟",
					"30分钟",
					"60分钟",
					"90分钟",
					"关闭定时",
				],
				isActive: -1 // 控制active状态的响应式数据
				
			}
		},
		onLoad() {
	
		},
		methods: {
			toggleActive(index) {
			  this.isActive = index; // 切换状态（数据驱动）
			}
		},
		components:{
		}
	}
</script>

<style lang="scss">
	@import '/common/novel/novel.scss';
	.timing-every{
		width: 100vw;
		height: 35vh;
		position: absolute;
		bottom: 0px;
		background-color: var(--bg-color); 
		
		.timing-title{
			width: 100%;
			height: 30px;
			color: #FFF;
			font-size: 12px;
			padding: 10px 0px 0px 15px;
		}
		.timing-box{
			width: 100%;
			height:36px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
			.timing-text{
				margin-left: 15px;
				color: var(--font-color);
				font-size: 12px;
			}
			
			.timing-btn {
			    width: 20px;
			    height: 20px;
			    margin-right: 20px;
			    border-radius: 50%;
			    background-color: var(--font-color);
			    display: flex;
			    justify-content: center;
			    align-items: center;
			    transition: background-color 0.3s;
			    position: relative; // 为伪元素定位添加相对定位
			    
			    &.active {
			        background-color: red;
			        
			        &::after {
			            content: '';
			            position: absolute;
			            width: 10px;
			            height: 10px;
			            border-radius: 50%;
			            background-color: #fff;
			        }
			    }
			}
			&::after {
			  content: '';
			  position: absolute;
			  bottom: 0;
			  left: 15px;
			  width: 90%;
			  height: 1px; /* 基础边框厚度 */
			  background-color: var(--font-color);
			  transform: scaleY(0.1); /* 垂直方向缩小 10 倍 */
			  transform-origin: bottom; /* 从底部开始缩放 */
			}
			
		}
		
	}
</style>